<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h1>Stock Table</h1>
<table id="stockTable">
    <thead>
        <tr id="dateRow">
            <th>Stock Symbol</th>
        </tr>
    </thead>
    <tbody id="tableBody">
    </tbody>
</table>

<script>
    // Get the stock symbols from the URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const symbolsParam = urlParams.get('symbols');
    const symbols = symbolsParam ? symbolsParam.split(',') : [];

    // Function to format a date as 'YYYY-MM-DD'
    function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    // Generate the date headers (today and previous 10 days)
    const dateRow = document.getElementById('dateRow');
    const today = new Date();
    for (let i = 0; i <= 10; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        const th = document.createElement('th');
        th.textContent = formatDate(date);
        dateRow.appendChild(th);
    }

    // Populate the table with stock symbols and empty cells for each date
    const tableBody = document.getElementById('tableBody');
    symbols.forEach(symbol => {
        const row = document.createElement('tr');
        
        // Create the stock symbol cell
        const symbolCell = document.createElement('td');
        symbolCell.textContent = symbol;
        row.appendChild(symbolCell);

        // Create empty cells for each date
        for (let i = 0; i <= 10; i++) {
            const cell = document.createElement('td');
            cell.textContent = ''; // You can fill this with data as needed
            row.appendChild(cell);
        }
        
        tableBody.appendChild(row);
    });
</script>

</body>
</html>